import React, { Component } from 'react'
import './index.less'
import { Row, Col } from 'antd'
import Util from '../../util/utils'
import axios from '../../axios'
export default class Index extends Component {
    state = {
        // userName:''
    }
    componentDidMount() {
        this.setState({
            userName: '小呆瓜'
        })
        setInterval(() => {
            // 获取系统时间
            let sysTime = Util.formateDate(new Date().getTime())
            //    let date = new Date()
            //     let sysTime = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
            this.setState({
                sysTime
            })
        }, 1000)
        this.getWeatherAPIData()

    }

    //    获取天气
    getWeatherAPIData() {
        let city = '北京'

        axios.jsonp({
            url: 'http://api.map.baidu.com/telematics/v3/weather?location=' + encodeURIComponent(city) + '&output=json&ak=3p49MVra6urFRGOT9s8UBWr2',

        }).then((res) => {

            if (res.status === 'success') {
                let data = res.results[0].weather_data[0]
                this.setState({
                    dayPictureUrl: data.dayPictureUrl,
                    nightPictureUrl: data.nightPictureUrl,
                    weather: data.weather
                })
            }

        })

    }
    render() {
        let currentTime = new Date().getHours();
        return (
            <div className='header'>
                <Row className='header-top'>
                    <Col span={24}>
                        <span>欢迎，{this.state.userName}</span>
                        <a href='#'>退出</a>
                    </Col>
                </Row>
                <Row className='breadcrumb'>
                    <Col span={4} className='breadcrumb-title'>首页</Col>
                    <Col span={20} className='weather'>
                        <span className='date'>{this.state.sysTime}</span>
                        <span className='weather-img'>
                            <img src={currentTime > 6 && currentTime < 15 ? this.state.dayPictureUrl : this.state.nightPictureUrl} alt='' />
                            {/* <img src={this.state.dayPictureUrl} alt=''/> */}

                        </span>
                        <span className='weather-detail'>
                            {this.state.weather}
                        </span>
                    </Col>
                </Row>
            </div>
        )
    }
}
